// 负责管理所有的自定义指令
export const imagerror = {
  // 指令对象 inserted会在当前dom元素插入到节点之后执行
  // dom是绑定指令的dom对象
  // options是 指令中的方法的集合对象 其中有一个value属性是指令的绑定值
  //        如：v-指令名 = "value"
  // onerror是图片元素的一个方法
  // 当图片有地址 但是地址没有加载成功的时候 会报错并触发图片的onerror事件
  inserted: (dom, options) => {
    dom.src = dom.src || options.value
    dom.onerror = () => {
      // 这里是当图片加载出错时就显示默认图片
      // 显示默认图片可以直接在标签 上添加onerror= "默认图片地址"
      dom.src = options.value
    }
  },
  // 该函数同inserted一样也是一个钩子函数
  // 该钩子函数会在当前指令作用的组件 更新数据完毕之后 执行
  // 由于inserted只会执行一次 若图片的url在其执行后又变为null则无法使用默认图片
  // 组件初始化进入inserted 一旦再次更新就会进入componentUpdate
  componentUpdated(dom, options) {
    dom.src = dom.src || options.value
  }
}
